<template>
  <div class="instruction">
    <div class="content">
      <span class="icon">
        !
      </span>
      <span class="text">{{instruction}}</span>
      <radiocheck-selector 
        class="radio-check"
        :radioCheckInfo="radioCheckInfo"
        v-if="showRadioCheck"
        @click="updataActiveIndex"
        >
      </radiocheck-selector>
    </div>
  </div>
</template>

<script>
import RadiocheckSelector from '@/components/base/radiocheck-selector/radiocheck-selector'
export default {
  components: {
    RadiocheckSelector
  },
  props: {
    instruction: {
      type: String,
      default: '玩法说明'
    },
    showRadioCheck: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      radioCheckInfo: {
        type: 'radio',
        data: [
          {
            label: '遗漏',
            id: 'missing'
          },
          {
            label: '冷门',
            id: 'unpopular'
          }
        ]
      }
    }
  },
  methods: {
    updataActiveIndex(newIndex) {
      this.$emit('click', newIndex)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .instruction
    width 100%
    box-sizing border-box 
    padding 0 20px
    .content
      height 36px
      display flex
      align-items center
      .icon
        display inline-block
        width 16px
        height 16px
        line-height 16px
        text-align center
        background rgba(224,40,40,1)
        border-radius 50%
        
        color #fff
      .text 
        margin-left 11px
      .radio-check 
        flex 1
        display flex 
        justify-content flex-end
    // .options
    //   .forget
    //     width:10px;
    //     height:10px;
    //     background:rgba(224,40,40,1);
    //     border-radius:5px;
    //     width:16px;
    //     height:16px;
    //     background:rgba(224,40,40,0);
    //     border:1px solid rgba(224, 40, 40, 1);
    //     box-shadow:0px 3px 5px 0px rgba(0, 0, 0, 0.1);
    //     border-radius:8px;
</style>